<template>
  <div class="content-right-header">
    <div class="content-right-header-left">
      <div
        :class="{
          'right-header-item': curFlowChild !== flowWaitExamine,
          'right-header-item-select': curFlowChild === flowWaitExamine,
        }"
        @click="handleSwitchChild(flowWaitExamine)"
      >
        待我审批({{ count.PI_PREAPPROV }})
      </div>
      <div
        :class="{
          'right-header-item': curFlowChild !== flowAlreadyTransact,
          'right-header-item-select': curFlowChild === flowAlreadyTransact,
        }"
        @click="handleSwitchChild(flowAlreadyTransact)"
      >
        已办理({{ count.PI_APPROVED }})
      </div>
      <div
        :class="{
          'right-header-item': curFlowChild !== flowMineFlow,
          'right-header-item-select': curFlowChild === flowMineFlow,
        }"
        @click="handleSwitchChild(flowMineFlow)"
      >
        我的流程({{ count.PI_OWNER }})
      </div>
      <div
        :class="{
          'right-header-item': curFlowChild !== flowDalyDispose,
          'right-header-item-select': curFlowChild === flowDalyDispose,
        }"
        @click="handleSwitchChild(flowDalyDispose)"
      >
        延时处理({{ count.PI_DELAY }})</div
      >
      <div
        :class="{
          'right-header-item': curFlowChild !== flowExamineNotify,
          'right-header-item-select': curFlowChild === flowExamineNotify,
        }"
        @click="handleSwitchChild(flowExamineNotify)"
      >
        审批告知({{ count.PI_INFORMIEREN }})
      </div>
    </div>
    <!-- 已办理和我的流程显示 -->
    <div
      v-show="curFlowChild === flowAlreadyTransact || curFlowChild === flowMineFlow"
      class="content-right-header-right"
    >
      <!-- <je-radio-group v-model:value="endStatus" :options="finishOptions" /> -->
      <je-dropdown
        placement="bottomRight"
        :trigger="['click']"
        :get-popup-container="popupContainer"
      >
        <span class="date-select">
          <span class="date-label">{{ endStatusLabel }}</span>
          <span class="date-arrow"></span>
        </span>
        <DownOutlined />
        <template #overlay overlayStyle>
          <je-menu>
            <je-menu-item
              v-for="item in finishOptions"
              :key="item.value"
              :class="{ 'person-type-foucs': endStatus == item.value }"
              @click="handleChangeStatus(item.value)"
            >
              <span>{{ item.label }}</span>
            </je-menu-item>
          </je-menu>
        </template>
      </je-dropdown>
    </div>
    <!-- 审批告知显示 -->
    <div
      v-show="curFlowChild === flowExamineNotify && count.PI_INFORMIEREN > 0"
      class="content-right-header-right"
      @click="handleAllExamineRead"
    >
      <span class="flow-examine-read">全部设为已读</span>
    </div>
    <div v-if="false" class="finish-status-box">
      <div
        class="finish-status-item status-item-left"
        :class="{
          'status-item-select': curFinishStatus === statusFinish,
          'status-item-left-select': curFinishStatus === statusFinish,
        }"
        @click="handleSwitchStatus(statusFinish)"
      >
        已完结
      </div>
      <div
        class="finish-status-item status-item-right"
        :class="{
          'status-item-select': curFinishStatus === statusUnfinish,
          'status-item-right-select': curFinishStatus === statusUnfinish,
        }"
        @click="handleSwitchStatus(statusUnfinish)"
      >
        未完结
      </div>
    </div>
  </div>
  <div v-if="curFlowChild === flowWaitExamine">
    <flow-check-item :check-type="waitType" :sort-code="sortCode" @flowChildCount="showItemCount" />
  </div>
  <div v-if="curFlowChild === flowAlreadyTransact">
    <flow-check-item
      :check-type="alreadyType"
      :end-status="endStatus"
      :sort-code="sortCode"
      @flowChildCount="showItemCount"
    />
  </div>
  <div v-if="curFlowChild === flowMineFlow">
    <flow-check-item
      :check-type="mineType"
      :end-status="endStatus"
      :sort-code="sortCode"
      @flowChildCount="showItemCount"
    />
  </div>
  <div v-if="curFlowChild === flowDalyDispose">
    <flow-check-item :check-type="dalyType" :sort-code="sortCode" @flowChildCount="showItemCount" />
  </div>
  <div v-if="curFlowChild === flowExamineNotify">
    <flow-check-item
      ref="examineRef"
      :check-type="examineType"
      :sort-code="sortCode"
      @flowChildCount="showItemCount"
    />
  </div>
</template>

<script>
  import { defineComponent, reactive, ref, toRefs, onMounted, onBeforeUnmount } from 'vue';
  import FlowCheckItem from '@/views/board-home/components/flow-check-item.vue';
  import VueEvent from '@/helper/event';
  import { DownOutlined } from '@ant-design/icons-vue';
  import {
    HOME_FLOW_WAIT_EXAMINE,
    HOME_FLOW_ALREADY_TRANSACT,
    HOME_FLOW_MINE_FLOW,
    HOME_FLOW_DALY_DISPOSE,
    HOME_FLOW_EXAMINE_NOTIFY,
    HOME_FLOW_STATUS_FINISH,
    HOME_FLOW_STATUS_UNFINISH,
    HOME_FLOW_EVENT_COUNT,
    HOME_FLOW_CHILD_SWITCH,
    HOME_FLOW_CHECK_TYPE,
  } from '@/helper/constant';
  import { updateExamineRead } from '@/api/index';
  export default defineComponent({
    name: 'FlowCheckMain',
    components: {
      FlowCheckItem,
      DownOutlined,
    },
    setup() {
      const examineRef = ref();
      const state = reactive({
        curFlowChild: HOME_FLOW_WAIT_EXAMINE, //当前流程
        flowWaitExamine: HOME_FLOW_WAIT_EXAMINE, //待我审批
        flowAlreadyTransact: HOME_FLOW_ALREADY_TRANSACT, //已办理
        flowMineFlow: HOME_FLOW_MINE_FLOW, //我的流程
        flowDalyDispose: HOME_FLOW_DALY_DISPOSE, //延时处理
        flowExamineNotify: HOME_FLOW_EXAMINE_NOTIFY, //审批告知
        curFinishStatus: HOME_FLOW_STATUS_UNFINISH, //当前完结状态
        statusFinish: HOME_FLOW_STATUS_FINISH, //完结状态
        statusUnfinish: HOME_FLOW_STATUS_UNFINISH, //完结状态
        waitType: 'PI_PREAPPROV', //待我审批 类型
        alreadyType: 'PI_APPROVED', //已办理 类型
        mineType: 'PI_OWNER', //我的流程 类型
        dalyType: 'PI_DELAY', //延时处理 类型
        examineType: 'PI_INFORMIEREN', //审批告知 类型
        count: {
          PI_PREAPPROV: 0,
          PI_APPROVED: 0,
          PI_OWNER: 0,
          PI_DELAY: 0,
          PI_INFORMIEREN: 0,
        },
        endStatus: '0', //未完结状态 '0'
        endStatusLabel: '未完结', //未完结状态label
        finishOptions: [
          { label: '未完结', value: '0' },
          { label: '已完结', value: '1' },
        ],
        sortCode: '', //流程分类
        updateAllExamineflag: true, //审批告知全部设为已读
      });
      const methods = {
        handleSwitchChild(childType) {
          //切换流程下的类型
          state.endStatus = '0';
          state.endStatusLabel = '未完结';
          state.curFinishStatus = state.statusUnfinish;
          state.curFlowChild = childType;
          // VueEvent.emit(HOME_FLOW_CHILD_SWITCH);
        },
        handleSwitchStatus(statusStr) {
          //切换完结/未完结状态
          state.endStatus = statusStr === state.statusFinish ? '1' : '0';
          state.curFinishStatus = statusStr;
        },
        showItemCount(countObj) {
          //展示对应流程模块的数量
          state.count = { ...countObj };
          VueEvent.emit(HOME_FLOW_EVENT_COUNT, countObj.PI_PREAPPROV);
        },
        changeFlowType(flowCode) {
          //更改流程类型
          state.sortCode = flowCode;
        },
        popupContainer(triggerNode) {
          return triggerNode.parentNode;
        },
        handleChangeStatus(statusValue) {
          //切换未完结/已完结状态
          state.endStatus = statusValue;
          state.finishOptions.forEach((item) => {
            if (item.value == statusValue) {
              state.endStatusLabel = item.label;
            }
          });
        },
        handleAllExamineRead() {
          //审批告知全部已读
          if (state.updateAllExamineflag) {
            state.updateAllExamineflag = false;
            updateExamineRead({ pkId: '' }).then((res) => {
              if (res.success) {
                state.updateAllExamineflag = true;
                state.count.PI_INFORMIEREN = 0;
                examineRef.value.getFlowData();
              }
            });
          }
        },
      };
      onMounted(() => {
        VueEvent.on(HOME_FLOW_CHECK_TYPE, methods.changeFlowType);
      });
      onBeforeUnmount(() => {
        VueEvent.off(HOME_FLOW_CHECK_TYPE);
      });
      return {
        examineRef,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .content-right-header {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    .content-right-header-left {
      display: flex;
      align-items: center;
    }
    .content-right-header-right {
      cursor: pointer;
      color: #3f3f3f;
      position: relative;
      .date-select {
        height: 28px;
        line-height: 28px;
        padding: 0 16px;
        display: inline-block;
        background-color: @je-menu-item-active-bg;
        border-radius: 14px;
        cursor: pointer;
        .date-label {
          font-size: 14px;
          color: @primary-color;
          padding-right: 4px;
        }
        .date-arrow {
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 7px solid @primary-color;
          font-size: 0;
          line-height: 0;
        }
      }
    }
    .right-header-item {
      font-size: 14px;
      color: #8d98ab;
      margin-right: 20px;
      cursor: pointer;
    }
    .right-header-item:hover {
      color: @primary-color;
    }
    .right-header-item-select {
      padding: 6px 8px;
      font-size: 14px;
      margin-right: 20px;
      background-color: @je-menu-item-active-bg;
      border: 1px solid @je-menu-item-active-bg;
      border-radius: 8px;
      color: @primary-color;
    }
    .finish-status-box {
      width: 84px;
      height: 26px;
      line-height: 26px;
      display: inline-flex;
      align-items: center;
      .finish-status-item {
        width: 42px;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        border-top: 1px solid #8d98ab;
        border-bottom: 1px solid #8d98ab;
        color: #8d98ab;
        cursor: pointer;
      }
      .status-item-left {
        border-left: 1px solid #8d98ab;
        border-radius: 8px 0 0 8px;
      }
      .status-item-right {
        border-right: 1px solid #8d98ab;
        border-radius: 0 8px 8px 0;
      }
      .status-item-left-select {
        border-right: 1px solid #3265f5;
      }
      .status-item-right-select {
        border-left: 1px solid #3265f5;
      }
      .status-item-select {
        border-color: #3265f5;
        color: #3265f5;
      }
    }
  }
</style>
